<template>
  <div id="add-text-book" class="manual-entry-container">
    <div>
      <ul>
        <li>
          <span class="active">年级</span>
          <span>{{ grade }}</span>
          <span class="active">专业班次</span>
          <span>{{ professional }} </span>
        </li>
        <li>
          <span class="active">课程名称</span>
          <span>{{ className }}</span>
          <span class="active">学时</span>
          <span>{{ classHours }} </span>
        </li>
        <li>
          <span class="active">系</span>
          <span>{{ system }}</span>
          <span class="active">教研室</span>
          <span>{{ teachingOffice }} </span>
        </li>
        <li>
          <span class="active">采购方式<span>*</span></span>
          <span>
            <el-select
              v-model="purchase"
              placeholder="请选择"
              size="mini"
              style="width: 140px"
              @change="handleChangePurchase"
            >
              <el-option
                v-for="(item, index) in purchaseList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </span>
          <span class="active"
            >采购数量<span v-show="purchase == '1'">*</span></span
          >
          <span>
            <div class="flex-center">
              <div>
                <span>教员：</span>
                <el-input
                  style="width: 100px; height: 28px"
                  size="small"
                  v-model="purchase_teacher"
                  :disabled="purchase == '0'"
                ></el-input>
              </div>
              <div>
                <span>学员：</span>
                <el-input
                  style="width: 100px; height: 28px"
                  size="small"
                  v-model="purchase_stu"
                  :disabled="purchase == '0'"
                ></el-input>
              </div>
            </div>
          </span>
        </li>
        <li>
          <span class="active"
            >教材名称<span v-show="purchase != '0'">*</span></span
          >
          <span>
            <div class="flex-center">
              <el-input
              readonly="true"
                style="width: 140px; height: 28px"
                size="small"
                v-model="textbookName"
                :disabled="purchase == '0'"
              ></el-input>
              <el-button v-if="purchase != '0'" size="mini" type="info" plain @click="fromJCK" style="margin-right:10px">从教材库选择</el-button>
            </div>
          </span>
          <span class="active"
            >编者<span v-show="purchase == '1'">*</span></span
          >
          <span
            ><el-input
              style="width: 140px; height: 28px"
              size="small"
              v-model="editor"
              disabled
            ></el-input
          ></span>
        </li>
        <li>
          <span class="active"
            >出版社<span v-show="purchase == '1'">*</span></span
          >
          <span
            ><el-input
              style="width: 140px; height: 28px"
              size="small"
              v-model="press"
              disabled
            ></el-input
          ></span>
          <span class="active"
            >出版年月<span v-show="purchase == '1'">*</span></span
          >
          <span>
            <el-date-picker
              v-model="publicationDate"
              type="date"
              value-format="yyyy-MM-dd"
              style="width: 140px"
              disabled
              placeholder="选择日期"
            >
            </el-date-picker>
          </span>
        </li>
        <li>
          <span class="active"
            >填报人<span v-show="purchase == '1'">*</span></span
          >
          <span
            ><el-input
              style="width: 140px; height: 28px"
              size="small"
              disabled
              placeholder="请输入填报人"
              v-model="filledPerson"
            ></el-input
          ></span>
        </li>
        <li>
          <span style="height: 120px" class="active">备注</span>
          <span style="width: 500px; height: 120px"
            ><el-input
              style="width: 300px"
              size="small"
              v-model="remarks"
              type="textarea"
              :rows="3"
            ></el-input
          ></span>
        </li>
      </ul>
    </div>
    <div class="btn-caozuo">
      <el-button type="success" @click="saveInfo" size="mini" plain>保存</el-button>
      <el-button type="warning" @click="cancelSelect" size="mini" plain>取消</el-button>
    </div>
  </div>
</template>

<script>
import ButtonItem from "@/components/ButtonItem.vue";
import {jxbgl_data_addBook, jxbgl_data_book_detail} from  "@/api/trainingManagement/place.js";
export default {
  components: {
    ButtonItem,
  },
  name: "workOutClass",
  data() {
    return {
      grade: "", //年级
      professional: "", //专业班次
      className: "", //课程名称
      classHours: "", //>学时
      system: "", //系
      teachingOffice: "", //教研室
      purchase: "", //采购方式
      courseId: '',
      kcbh: '',
      xueqi: '',
      kechengbianhao: '',
      xueqi_id: '',
      purchaseList: [
        { label: "不需要教材", value: "0" },
        { label: "外购", value: "1" },
        { label: "自印", value: "2" },
      ],
      purchase_teacher: "", //采购数量 教员
      purchase_stu: "", //采购数量 学员
      textbookName: "", //教材名称
      editor: "", //编者
      press: "", //出版社
      publicationDate: "", //出版年月
      filledPerson: "", //填报人
      filledPersonId: '',
      remarks: "", //备注
      id: "",

      selectId: "",
      selectName: "",
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.grade = this.$route.query.grade;
    this.professional = this.$route.query.professional;
    this.className = this.$route.query.className;
    this.classHours = this.$route.query.classHours;
    this.system = this.$route.query.system;
    this.teachingOffice = this.$route.query.teachingOffice;
    this.courseId = this.$route.query.courseId;
    this.kcbh = this.$route.query.kcbh;
    this.kechengbianhao = this.$route.query.kcbh;
    this.xueqi = this.$route.query.xueqi;
    this.xueqi_id = this.$route.query.xueqi;

    this.selectId = this.$route.query.selectId;
    this.selectName = this.$route.query.selectName;
    this.textbookName = this.selectName;
    this.editor = this.$route.query.bz; //编者
    this.press = this.$route.query.cbs; //出版社
    this.publicationDate = this.$route.query.cbrq; //出版年月
    this.purchase = this.$route.query.purchase || ''; //出版年月

    this.queryBookDetails(this.id);
  },
  methods: {
    queryBookDetails(id) {
      let data = {
        xueqi: this.xueqi || localStorage.getItem('xueqi'),
        kcbh: this.kcbh || localStorage.getItem('kcbh'),
        courseId: this.courseId || localStorage.getItem('courseId'),
        grade: this.grade
      }
      jxbgl_data_book_detail(data).then(res=>{
        if (res.data.code == 200) {
          this.textbookName = res.data.data.jcmc;
          this.press = res.data.data.cbs; //出版社
          this.publicationDate = res.data.data.cbrq; //出版年月
          this.remarks = res.data.data.remark;
          this.filledPerson = res.data.data.fillByName;
          this.purchase_stu =res.data.data.studentbuynum;
          this.purchase_teacher = res.data.data.teacherbuynum;
          this.editor = res.data.data.zz;
          this.purchase = res.data.data.cgfs || '';
          this.selectId = res.data.data.jcid;
          this.courseId = res.data.data.courseId;
          this.filledPersonId = res.data.data.fillBy;
          this.grade = res.data.data.grade;
        }
      }).then(()=>{
        if(localStorage.getItem('jcid') && localStorage.getItem('jcid') !='' && localStorage.getItem('jcid') !='null' && localStorage.getItem('jcid') !=null){
          this.selectId = localStorage.getItem('jcid')
        }
        if(localStorage.getItem('jcmc') && localStorage.getItem('jcmc') !='' && localStorage.getItem('jcmc') !='null' && localStorage.getItem('jcmc') !=null){
          this.selectName = localStorage.getItem('jcmc')
          this.textbookName = localStorage.getItem('jcmc')
        }
        if(localStorage.getItem('bz') && localStorage.getItem('bz') !='' && localStorage.getItem('bz') !='null' && localStorage.getItem('bz') !=null){
          this.editor = localStorage.getItem('bz')
        }
        if(localStorage.getItem('cbs') && localStorage.getItem('cbs') !='' && localStorage.getItem('cbs') !='null' && localStorage.getItem('cbs') !=null){
          this.press = localStorage.getItem('cbs')
        }
        if(localStorage.getItem('cbrq') && localStorage.getItem('cbrq') !='' && localStorage.getItem('cbrq') !='null' && localStorage.getItem('cbrq') !=null){
          this.publicationDate = localStorage.getItem('cbrq')
        }
      })
    },
    //
    cancelSelect() {
      this.$router.push("/admin/teachingTaskManage/checkteachingtask/index");
    },
    // 保存
    async saveInfo() {
      if(this.purchase == ''){
        this.$message.warning("请选择采购方式!");
        return;
      }
      if (this.purchase == '1') {
        if (this.purchase_teacher == "" || this.purchase_teacher == null || this.purchase_stu == "" || this.purchase_stu == null) {
          this.$message.warning("请先输入采购数量!");
          return;
        }
        if (this.selectId == "" || this.selectId == null ) {
          this.$message.warning("请先选择教材!");
          return;
        }
        if (this.editor == "" || this.editor == null ) {
          this.$message.warning("请先输入编者!");
          return;
        }
        if (this.press == "" || this.press == null ) {
          this.$message.warning("请先输入出版社!");
          return;
        }
         if (this.publicationDate == "" || this.publicationDate == null ) {
          this.$message.warning("请先选择出版日期!");
          return;
        }
        if (this.filledPerson == "" || this.filledPerson == null ) {
          this.$message.warning("请先填写填报人!");
          return;
        }
      } else if (this.purchase == '2') {
        if (this.selectId == "" || this.selectId == null ) {
          this.$message.warning("请先选择教材!");
          return;
        }
      }
      var data = {
          // "id":2,
          // "grade": 1,
          "id": this.id,
          "teacherbuynum": this.purchase_teacher,
          "studentbuynum": this.purchase_stu,
          "jcid": this.selectId,
          "jcmc": this.selectName,
          "fillBy": this.filledPersonId,
          "zz": this.editor,
          "cbs": this.press,
          "cbrq": this.publicationDate,
          "remark": this.remarks,
          "cgfs": this.purchase,
          "xueqi": this.xueqi || localStorage.getItem('xueqi'),
          "kcbh": this.kcbh || localStorage.getItem('kcbh'),
          "courseId": this.courseId || localStorage.getItem('courseId'),
          "grade": this.grade
      };
      const res = await jxbgl_data_addBook(data);
      if (res.data.code == 200) {
        localStorage.removeItem('jcid');
        localStorage.removeItem('jcmc');
        localStorage.removeItem('bz');
        localStorage.removeItem('cbs');
        localStorage.removeItem('cbrq');
        this.$message.success("添加成功！");
        this.$router.push("/admin/teachingTaskManage/checkteachingtask/index");
      }

    },
    // 从教材库选择
    fromJCK() {
      this.$router.push({
        path: "/admin/teachingTaskManage/teachingclass/TextbookSelect",
        query: {
          id:this.id,
          grade: this.grade,
          professional: this.professional,
          className: this.className,
          classHours: this.classHours,
          system: this.system,
          teachingOffice: this.teachingOffice,
          purchase: this.purchase
        }
      })
    },
    handleChangePurchase(){
      if(this.purchase == '0'){
        this.purchase_teacher = '';
        this.purchase_stu = '';
        this.textbookName = "";
        this.selectId = "";
        this.selectName = "";
        this.editor = "";
        this.press = "";
        this.publicationDate = "";
      }
    }
  },
};
</script>

<style scoped lang="less">
.manual-entry-container {
  > div:nth-child(1) {
    width: 100%;
    height: 549px;
    border: 1px solid rgba(0, 76, 167, 0.8);
    border-radius: 6px;
    margin: 70px auto 0;
    ul {
      list-style: none;
      li {
        border-bottom: 1px solid rgba(0, 76, 167, 0.4);
        height: auto;
        > span {
          box-sizing: border-box;
          display: inline-block;
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          padding-left: 54px;
          border-right: 1px solid rgba(0, 76, 167, 0.4);
          height: 60px;
          padding-top: 20px;
          vertical-align: middle;
          &:nth-child(n) {
            width: 357px;
          }
          &:last-child {
            border-right: none;
          }
          &.active {
            font-size: 16px;
            color: rgba(0, 76, 167, 1);
            font-weight: bold;
            background: rgba(77, 129, 192, 0.1);
            text-align: center;
            padding-left: 0;
          }
          > span {
            color: red;
          }
        }
      }
      &:nth-child(1) {
        li {
          > span {
            &.active {
              text-align: left;
              padding-left: 100px;
            }
          }
        }
      }
    }
    > div {
      padding: 14px 83px;
      height: 78px;
      > div:nth-child(1) {
        font-size: 16px;
        font-weight: bold;
        color: #004ca7;
        margin-bottom: 10px;
      }
      > div:nth-child(2) {
        > span {
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          margin-right: 57px;
          > span {
            color: rgba(255, 56, 25, 1);
          }
        }
      }
    }
  }
  .button-group {
    text-align: center;
    margin-top: 36px;
    > div {
      display: inline-block;
      padding: 6px 20px;
      background: rgba(255, 246, 239, 1);
      border: 1px solid rgba(243, 184, 21, 1);
      border-radius: 4px;
      font-size: 18px;
      font-weight: 400;
      color: rgba(243, 184, 21, 1);
      text-align: center;
    }
  }
  .edit-icon {
    font-size: 20px;
    color: #02c86c;
    margin-left: 10px;
    cursor: pointer;
  }

  /deep/ .el-input__inner {
    height: 28px;
  }
}

.btn-caozuo {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 800px;
  margin: 0 auto;
  padding-top: 50px;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.body-manual-container {
  > div:nth-child(1) {
    width: 800px;
    // height: 785px;
    border: 1px solid rgba(0, 76, 167, 0.8);
    border-radius: 6px;
    margin: 70px auto 0;
    ul {
      list-style: none;
      li {
        border-bottom: 1px solid rgba(0, 76, 167, 0.4);
        height: auto;
        > span {
          box-sizing: border-box;
          display: inline-block;
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          padding-left: 54px;
          border-right: 1px solid rgba(0, 76, 167, 0.4);
          height: 60px;
          padding-top: 20px;
          vertical-align: middle;
          &:nth-child(n) {
            width: 357px;
          }
          // &:nth-child(2n) {
          // 	width: 444px;
          // }
          &:last-child {
            border-right: none;
          }
          &.active {
            font-size: 16px;
            color: rgba(0, 76, 167, 1);
            font-weight: bold;
            background: rgba(77, 129, 192, 0.1);
            text-align: center;
            padding-left: 0;
          }
          > span {
            color: rgba(255, 56, 25, 1);
          }
        }
      }
    }
  }
}
/deep/ .el-date-editor .el-input__icon {
  margin-top: -3px;
  margin-right: -10px;
}
</style>


<style lang="less" scoped>
  #add-text-book{
    /deep/ .el-button--warning.is-plain{
      background: #FFF6EF;
      border-color: #F3B815;
      color: #F3B815;
      border-radius: 6px;
    }
    /deep/ .el-button--warning.is-plain:focus, .el-button--warning.is-plain:hover{
      color: #F3B815;
      background: #FFF6EF;
      border: 1px solid #F3B815;
      border-radius: 6px;
    }

    /deep/ .el-button--success.is-plain{
      background: #F1FFF8;
      border-color: #02C86C;
      color: #02C86C;
      border-radius: 6px;
    }
    /deep/ .el-button--success.is-plain:hover{
      background: #F1FFF8;
      border: 1px solid #02C86C;
      color: #02C86C;
      border-radius: 6px;
    }

    /deep/ .el-button--info.is-plain{
      background: #EBE6FF;
      border-color: #5230E9;
      color: #5230E9;
      border-radius: 6px;
    }

    /deep/ .el-button--info.is-plain:hover{
      background: #EBE6FF;
      border: 1px solid #5230E9;
      color: #5230E9;
      border-radius: 6px;
    }

    /deep/ .el-button--danger.is-plain{
      background: #FFEFEF;
      border-color: #FF3819;
      color: #FF3819;
      border-radius: 6px;
    }

    /deep/ .el-button--danger.is-plain:hover{
      background: #FFEFEF;
      border: 1px solid #FF3819;
      color: #FF3819;
      border-radius: 6px;
    }
  }
</style>
